<template>
	<div class="system-add-dept-container">
		<el-dialog title="新增部门" v-model="isShowDialog" width="769px">
			<el-form :model="deptForm" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="上级部门">
							<el-cascader
								:options="deptData"
								:props="{ checkStrictly: true, value:'id', label:'deptName' }"
								placeholder="请选择部门"
								clearable
								class="w100"
								v-model="deptForm.pId"
							>
								<template #default="{ node, data }">
									<span>{{ data.deptName }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="部门名称">
							<el-input v-model="deptForm.deptName" placeholder="请输入部门名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="部门等级">
							<el-input-number v-model="deptForm.level" :min="0" :max="999" controls-position="right" placeholder="请输入等级" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="负责人">
							<el-input v-model="deptForm.person" placeholder="请输入负责人" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="手机号">
							<el-input v-model="deptForm.phone" placeholder="请输入手机号" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="邮箱">
							<el-input v-model="deptForm.email" placeholder="请输入" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="排序">
							<el-input-number v-model="deptForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="部门状态">
							<el-switch v-model="deptForm.status" inline-prompt active-text="启" active-value="1" inactive-text="禁" inactive-value="0"></el-switch>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="部门描述">
							<el-input v-model="deptForm.describe" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang='ts'>
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
import { deptMenuApi, DeptSate,SimpleDeptInfo } from '/@/api/dept';
import { ElMessage } from 'element-plus';

export default defineComponent({
	name: 'systemAddDept',
	setup() {
		const state = reactive<DeptSate>({
			isShowDialog: false,
			deptForm: {
				pId: 0, // 上级部门
				deptName: 'java研发', // 部门名称
				person: '胡章林', // 负责人
				phone: '15972740935', // 手机号
				email: '799490931@qq.com', // 邮箱
				sort: 1, // 排序
				status: 1, // 部门状态
				describe: '12312', // 部门描述
				level: 1,
			},
			deptData: [], // 部门数据
		});

		const deptApi = deptMenuApi();
		const log = console;
		// 打开弹窗
		const openDialog = () => {
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = () => {
			state.deptForm.pId = state.deptForm.pId[0]
			state.deptForm.responsiblePerson = state.deptForm.person;
			state.deptForm.mobile = state.deptForm.phone;
			state.deptForm.deptName1 = state.deptForm.deptName;
			state.deptForm.describe1 = state.deptForm.describe;
			state.deptForm.sort1 = state.deptForm.sort;
			state.deptForm.status1 = state.deptForm.status;
			// state.deptForm.status  = (state.deptForm.status === true?1:0);
			log.log("add ====" + JSON.stringify(state));
			deptApi.addDept(state.deptForm).then((res) => {
				log.log('debug==' + JSON.stringify(res));
				if (res.code == 0) {
					closeDialog();
					ElMessage.success('添加成功');
				}
			});
		};
		// 初始化部门数据
		const initTableData = () => {
			let param = { level: 1, status1: 1 };

			deptApi.getDept(param).then((res) => {
				if (res.code === 0) {
					let data = res.data[0];
					let pushRam:SimpleDeptInfo = {
						deptName:data.deptName1,
						id:data.id,
						children:[]
					};

					log.log("===========12312312312==========="+JSON.stringify(data.children))

					for (const index in data.children) {
						let oneParam:SimpleDeptInfo = {
							deptName:data.children[index].deptName1,
							id:data.children[index].id,
							children: [],
						};
						pushRam.children.push(oneParam);
					}
					state.deptData.push(pushRam);
				}
			});
		};
		// 页面加载时
		onMounted(() => {
			initTableData();
			log.info('==================');
			state.deptForm.status = 1;
		});
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
});
</script>
